<template>
  <div class="adminCollect">
    <div class="adminMsg">
      <h2>我的收藏</h2>
      <div class="title block">
        <span>收藏列表</span>
        <span>操作</span>
      </div>
      <div v-for="item in currentList" :key="item">
        <div class="info block">
          <div class="imgTitle">
            <router-link :to="{ name: 'houseDetail', params: { id: item.houseId }}">
              <img :src="getFirstImage(item.house.imgUrl)">
            </router-link>
            <div class="houseInfo">
              <router-link :to="{ name: 'houseDetail', params: { id: item.houseId }}">
                <div>
                  <h3>{{item.house.title}}</h3>
                  <p style="font-weight: inherit;color: #40a9ff;font-size: large">房屋地址：{{ item.house.city + item.house.area + item.house.address }}</p>
                </div>
              </router-link>
              <div style="font-size: large;color: #20ab6c">租金：¥ {{item.house.monthRent}}/月</div>
            </div>
          </div>
          <div class="msg">
            <el-button type="text" @click="cancel(item.houseId)"><i class="el-icon-close"></i> 取消收藏</el-button>
          </div>
        </div>
      </div>
      <div class="Page">
        <el-pagination :current-page.sync="pageNum"
                       :page-size="pageSize"
                       :page-sizes="[3, 5, 7]"
                       :total="allList.length"
                       layout="total, sizes, prev, pager, next"
                       @current-change="handlePage"
                       @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "AdminCollect",

  created() {
    this.getCollectInfo();
  },

  data() {
    return {
      currentList:[],
      collect:[],
      list: [],
      allList:[],
      pageNum: 1,
      pageSize: 3,
    }
  },
  methods: {

    getFirstImage(imgUrl){
      try {
        // 尝试解析JSON格式（兼容数组存储）
        const images = typeof imgUrl === 'string' ? JSON.parse(imgUrl) : imgUrl;
        return images?.[0]; // 返回首图或默认图
      } catch (e) {
        // 处理普通字符串格式（兼容旧数据）
        return imgUrl;
      }
    },

    handleSizeChange(size) {
      this.pageSize = size;
      this.pageNum = 1; // 重置到第一页
      this.handlePage(1,size)
    },

    handlePage(page) {
      this.pageNum = page;
      const start = (page - 1) * this.pageSize;
      const end = page * this.pageSize;
      this.currentList = this.allList.slice(start, end);
    },

    getCollectInfo(){
      axios({
        url: "http://localhost:8090/collect/getCollectList/"+JSON.parse(localStorage.getItem('login-user')).id,
        methods: 'get',
      }).then(res=>{
        if (res.code === '200'){
          this.allList = res.data;
          this.handlePage(1);
        }else
          this.$message.warning(res.msg)
      })
    },

    cancel(id){
      axios({
        url: "http://localhost:8090/collect/delete",
        method: 'delete',
        data: {
          userId: JSON.parse(localStorage.getItem('login-user')).id,
          houseId: id
        }
      }).then(res => {
        if (res.code === '200'){
          this.$message.success("取消收藏成功！")
          location.reload();
        }
      })
    }
  },
}
</script>

<style scoped>
a {
  text-decoration: none;
  color: #333;
}
.adminCollect {
  width: 100%;
  min-height: 750px;
  background-color: white;
  padding: 20px 50px;
}

.adminMsg {
  width: 100%;
  min-height: 800px;
  background-color: white;
  border-radius: 15px;
  padding: 20px 90px 10px 20px;
  box-shadow: 0 0px 14px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.adminMsg h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.Page {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.block {
  display: block;
  display: flex;
  align-items: center;
  width: 1195px;
}

.block> :first-child {
  flex: 6;
}

.block> :nth-child(n+2) {
  flex: 1;
}

.title {
  height: 50px;
  background-color: #4b5fff;
  color: white;
  padding-left: 20px;
  margin-top: 20px;
}

.info {
  height: 180px;
  padding: 30px 0;
  border-bottom: 1px solid #eee;
}

.info img {
  width: 200px;
  height: 150px;
}

.info .msg {
  color: #777;
  line-height: 20px;
  font-size: 14px;
}

.imgTitle {
  display: flex;
}

.houseInfo {
  margin-left: 20px;
  line-height: 34px;
}

.houseInfo h3 {
  font-size: 18px;
  font-weight: 600;
}

.houseInfo p {
  font-size: 14px;
  color: #777;
}

.houseInfo h4 {
  color: rgb(49, 159, 49);
}
</style>